<!--
 * @Descripttion: 形态转换列表
 * @Autor: zhouchen
 * @Date: 2020-11-28 09:24:27
 * @LastEditTime: 2021-12-24 13:59:00
-->

<template>
  <a-card>
    <a-form-model :model="queryform" v-bind="layout">
      <a-row>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item label="制单日期">
            <!-- <a-date-picker style="width: 100%" v-model="queryform.formDate" /> -->

            <a-range-picker
              style="width: 100%"
              v-model="queryform.formDate"
              @change="getRangeTime"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item label="单据号">
            <a-select
              v-model="queryform.document"
              showSearch
              style="width: 100%"
            >
              <a-select-option
                v-for="(item, index) in OrderList"
                :key="index"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item label="存货编码">
            <a-select
              v-model="queryform.inventoryNo"
              @search="handleSearchByNo"
              style="width: 100%"
              showSearch
              @change="
                (val) => {
                  const arr = val.split('|');
                  this.queryform.inventoryId = arr[0];
                  this.queryform.inventoryNo = arr[1];
                  this.queryform.inventoryName = arr[2];
                }
              "
            >
              <a-select-option
                v-for="(item, index) in goodsList"
                :key="index"
                :value="
                  item.inventoryId +
                  '|' +
                  item.inventoryNo +
                  '|' +
                  item.inventoryName +
                  '|' +
                  item.standardModel +
                  '|' +
                  item.unit
                "
              >
                {{ item.inventoryNo }} {{ item.inventoryName }}
                {{ item.standardModel }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item label="存货名称">
            <a-select
              v-model="queryform.inventoryName"
              @change="
                (val) => {
                  const arr = val.split('|');
                  this.queryform.inventoryId = arr[0];
                  this.queryform.inventoryNo = arr[1];
                  this.queryform.inventoryName = arr[2];
                }
              "
              @search="handleInventoryInfoSearch"
              style="width: 100%"
              showSearch
            >
              <a-select-option
                v-for="(item, index) in goodsList"
                :key="index"
                :value="
                  item.inventoryId +
                  '|' +
                  item.inventoryNo +
                  '|' +
                  item.inventoryName +
                  '|' +
                  item.standardModel +
                  '|' +
                  item.unit
                "
              >
                {{ item.inventoryNo }} {{ item.inventoryName }}
                {{ item.standardModel }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item label="仓库名称">
            <a-select
              showSearch
              v-model="queryform.houseName"
              @change="
                (val) => {
                  const arr = val.split('|');
                  this.queryform.inboundHouse = arr[2];
                }
              "
            >
              <a-select-option
                v-for="item in storageList"
                :key="item.depotId"
                :value="
                  item.depotNo + '|' + item.depotName + '|' + item.depotId
                "
                >{{ item.depotNo }} {{ item.depotName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item label="审核状态">
            <a-select v-model="queryform.auditMark">
              <a-select-option value="1">已审核</a-select-option>
              <a-select-option value="2">未审核</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item label="制单人">
            <a-select
              v-model="queryform.prepared"
              style="width: 100%"
              showSearch
            >
              <a-select-option
                v-for="(item, index) in PreparedyList"
                :key="index"
                :value="item.id"
              >
                {{ item.id_dictText }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item label="同步状态">
            <a-select v-model="queryform.isSynchronized" style="width: 100%">
              <a-select-option
                v-for="item in isSynchronizedList"
                :value="item"
                :key="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-col style="margin-bottom: 1%" align="right">
        <a-space>
          <a-button type="primary" @click="queryList">查询</a-button>
          <a-button @click="Reset">重置</a-button>
          <a-button style="margin-left: 8px" @click="exportToExcel"
            >导出</a-button
          >
        </a-space>
      </a-col>
    </a-form-model>
    <a-table
      :columns="columns"
      :data-source="data"
      :scroll="{ x: 1000 }"
      :pagination="pagination"
      @change="handleTableChange"
      size="small"
    >
      <!-- 点击单据号 出现出库单 -->
      <span slot="document" slot-scope="text, record">
        <a @click="RouterJump(record)">{{ text }}</a>
      </span>

      <template slot="options" slot-scope="text, record">
        <a-popconfirm
          v-if="record.auditMark_dictText == '未审核'"
          ok-text="确定"
          cancel-text="取消"
          @confirm="Delete(record.id)"
        >
          <template slot="title">
            <p>确定删除？</p>
          </template>
          <a type="danger"> 删除 </a>
        </a-popconfirm>
        <a v-if="record.auditMark_dictText == '已审核'" style="color: #666666">
          <a-tooltip>
            <template slot="title"> 不允许删除 </template>
            删除
          </a-tooltip>
        </a>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import { CommonAjax } from "@/services/modules/common";
const comHttp = new CommonAjax();
import { XingTaiZhuanHuanLieBiao } from "@/services/modules/KuCunTiaoZheng/XingTaiZhuanHuanLieBiao.js";
const zhuanhuanHttp = new XingTaiZhuanHuanLieBiao();
// 引入
// import moment from "moment";
import "moment/locale/zh-cn";

const columns = [
  {
    title: "序号",
    dataIndex: "lineNo",
    key: "lineNo",
    align: "center",
    width: "50px",
  },
  {
    title: "日期",
    dataIndex: "documentDate",
    key: "documentDate",
    align: "center",
    width: "100px",
  },
  {
    title: "审核标志",
    dataIndex: "auditMark_dictText",
    key: "auditMark_dictText",
    align: "center",
    width: "80px",
  },
  {
    title: "用友同步",
    dataIndex: "isSynchronized",
    key: "isSynchronized",
    align: "center",
    width: "80px",
  },
  {
    title: "反审核",
    dataIndex: "isAntiAudit",
    key: "isAntiAudit",
    width: "80px",
    align: "center",
  },
  {
    title: "单据号",
    dataIndex: "document",
    key: "document",
    align: "center",
    width: "110px",
    scopedSlots: { customRender: "document" },
  },
  {
    title: "仓库名称",
    dataIndex: "depotId_dictText",
    key: "depotId_dictText",
    align: "center",
    width: "100px",
  },
  {
    title: "转换类别",
    dataIndex: "transformationType_dictText",
    key: "transformationType_dictText",
    align: "center",
    width: "90px",
  },
  {
    title: "收发类别",
    dataIndex: "sendAndReceiveCategory_dictText",
    key: "sendAndReceiveCategory_dictText",
    align: "center",
    width: "80px",
  },
  {
    title: "存货编码",
    dataIndex: "invcode",
    key: "invcode",
    align: "center",
    width: "100px",
  },
  {
    title: "存货名称",
    dataIndex: "inventoryId_dictText",
    key: "inventoryId_dictText",
    align: "center",
    width: "120px",
  },
  {
    title: "规格型号",
    dataIndex: "specificationsModel",
    key: "specificationsModel",
    align: "center",
    width: "80px",
  },
  {
    title: "单位",
    dataIndex: "unit",
    key: "unit",
    align: "center",
    width: "50px",
  },
  {
    title: "辅助单位",
    dataIndex: "auxiliaryUnit_dictText",
    key: "auxiliaryUnit_dictText",
    align: "center",
    width: "50px",
  },
  {
    title: "数量",
    dataIndex: "number",
    key: "number",
    align: "center",
    width: "50px",
  },
  {
    title: "金额",
    dataIndex: "money",
    key: "money",
    align: "center",
    width: "50px",
  },
  {
    title: "批次号",
    dataIndex: "batch",
    key: "batch",
    width: "100px",
    align: "center",
  },
  {
    title: "制单人",
    dataIndex: "preparedBy_dictText",
    key: "preparedBy_dictText",
    align: "center",
    width: "80px",
  },
  {
    title: "记账标志",
    dataIndex: "bookkeepingMark_dictText",
    key: "bookkeepingMark_dictText",
    align: "center",
    width: "80px",
  },
  {
    title: "审核人",
    dataIndex: "reviewer_dictText",
    key: "reviewer_dictText",
    align: "center",
    width: "80px",
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    align: "center",
    width: "80px",
  },
  {
    title: "操作",
    dataIndex: "options",
    key: "options",
    align: "center",
    fixed: "right",
    width: "80px",
    scopedSlots: { customRender: "options" },
  },
];

const data = [];
export default {
  data() {
    return {
      isSynchronizedList: ["已同步", "未同步"],

      // ----------- 通用 -----------
      // 获取所有单据号数组
      ALLOrderList: [],

      // 表单的格式
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 15 },
      },

      // 分页
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据

        pageSizeOptions: ["5", "10", "20", "30"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
        showSizeChanger: true, // 显示页面条数改变
        showQuickJumper: true, // 显示快速跳转
      },

      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      },

      // ----------- 上方查询表单 -----------
      // 获取数据
      queryform: {
        isSynchronized: "",
        document: "",
        inventoryName: "",
        auditMark: "",
        inboundHouse: "",
        prepared: "",
        inventoryId: "", // 存货名称
      },

      // 下拉框 仓库名称
      storageList: [],

      // 下拉框 存货名称
      goodsList: [],

      // ----------- 表格 -----------
      columns,
      data,
      OrderList: [], // 单据列表

      PreparedyList: [], //制单人列表
    };
  },
  watch: {
    $route: function (to, form) {
      if (
        to.path == "/MorphologicalTransformationList" &&
        form.path == "/MorphologicalTransformation"
      ) {
        console.log("--------- 更新视图 形态转换列表  ----------");
        this.getMorphologicalTransformationList();
      }

      if (
        to.path == "/MorphologicalTransformationList" &&
        form.path == "/MorphologicalTransformationDetail"
      ) {
        console.log("--------- 更新视图 形态转换列表  ----------");
        this.getMorphologicalTransformationList();
      }
    },
  },

  mounted() {
    // 拉取仓库名称
    this.getApplyStorage();
    // 拉取存货编码列表
    // this.getInventoryCode();
    // 拉取形态转换列表
    this.getMorphologicalTransformationList();
    this.getAssemblyListAndId1();
    this.getPreparedyList(); //获取制单人列表
  },

  methods: {
    // 获取制单人列表
    getPreparedyList() {
      comHttp.getPrepareBytransformation().then((res) => {
        var pattern = new RegExp("[\u4E00-\u9FA5]+");

        console.log("获取制单人列表:::::", res);
        let data = res.result.list.filter((item) => {
          if (pattern.test(item.id)) {
            console.log(item.id);
          } else if (item.id == null) {
            console.log(item.id);
          } else {
            return item;
          }
        });
        console.log(data);
        this.PreparedyList = data;
      });
    },
    // 获取存货id
    changeinventoryId(value, option) {
      this.queryform.inventoryId = option.key;
      console.log("存货id::::", this.queryform.inventoryId);
    },
    // 获取时间段
    getRangeTime(moment, date) {
      console.log(moment);
      console.log(date);

      this.queryform.beginDate = date[0];
      this.queryform.endDate = date[1];
    },
    // ----------- 通用 -----------
    // 获取仓库
    getApplyStorage() {
      this.storageList = [];
      // 获取仓库名称
      comHttp.getAllNumberName_new_forU8c().then((res) => {
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            depotName: res.result[i].storname,
            depotNo: res.result[i].storcode,
            depotId: res.result[i].pkStordoc,
          };
          this.storageList.push(data);
        }
      });
    },

    // 重置当前页码及页码参数
    resetPagination() {
      this.pagination = {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      };
      //查询参数
      this.queryParam = {
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
      };
    },

    // 获取全局查询条件
    getQueryPath() {
      let queryPath = "?pageNo=" + this.queryParam.page;
      return queryPath; // 返回的查询条件
    },

    // 获取存货编码和存货信息
    // getInventoryCode() {
    //   let _list = [];
    //   comHttp.getInventoryInformation().then((res) => {
    //     let array = res.result;
    //     console.log("----- arrayIn -----", array);
    //     for (let i = 0; i < array.length; i++) {
    //       let singleData = {
    //         inventory_id: array[i].id,
    //         inventory_no: array[i].inventoryNo,
    //         inventory_name: array[i].inventoryName,
    //         specificationsModel: array[i].specificationsModel,
    //         unit: array[i].unit,
    //       };
    //       _list.push(singleData);
    //     }
    //   });
    //   this.inventoryList = _list;
    // },

    // 模糊查询 存货编码
    //查询实时输入
    handleSearchByNo(value) {
      this.debounce(value, 800);
    },
    //延迟
    debounce(value, wait) {
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.onfunc(value);
      }, wait);
    },
    onfunc(value) {
      //模糊查询
      this.goodsList = [];
      console.log("invcode", invcode);
      let invcode = "?invcode=" + value;
      console.log("invcode", invcode);
      if (value == "" || value == null) {
        this.goodsList = [];
      } else {
        comHttp.getqueryInventoryByInvcode(invcode).then((res) => {
          console.log("结果为", res);
          // this.goodsList = res.result;
          for (let i = 0; i < res.result.length; i++) {
            if (
              res.result[i].specificationsModel == "null" ||
              res.result[i].specificationsModel == null
            ) {
              res.result[i].specificationsModel = "";
            }
            if (res.result[i].unit == "null" || res.result[i].unit == null) {
              res.result[i].unit = "";
            }
            let data = {
              inventoryId: res.result[i].pkInvbasdoc, // 存货 id
              inventoryNo: res.result[i].invcode, //存货编码
              inventoryName: res.result[i].invname, //存货名称
              standardModel: res.result[i].invspec, //规格型号
              unit: res.result[i].measname, //单位
            };
            this.goodsList.push(data);
          }
        });
      }
    },
    async handleInventoryInfoSearch(value) {
      //模糊查询
      var goodsList_invname = [];
      var goodsList_invspec = [];
      this.goodsList = [];
      if (value.match(/^[ ]*$/)) {
        console.log("字符串为空或全空格");
      } else {
        this.goodsList = [];
        let queryPath = "?name=" + value;
        if (value == "" || value == null) {
          this.goodsList = [];
        } else {
          this.goodsList = [];
          await comHttp
            .getSearchInventoryInformationFile(queryPath)
            .then((res) => {
              console.log("res", res.result);
              for (let i = 0; i < res.result.length; i++) {
                let data = {
                  inventoryId: res.result[i].pkInvbasdoc, // 存货 id
                  inventoryName: res.result[i].invname,
                  inventoryNo: res.result[i].invcode,
                  standardModel: res.result[i].invspec,
                  unit: res.result[i].measname,
                };
                goodsList_invname.push(data);
              }
            });
          let queryInventoryBySpec = "?invspec=" + value;
          //规格型号模糊查询
          await comHttp
            .getqueryInventoryBySpec(queryInventoryBySpec)
            .then((res) => {
              console.log("结果规格型号模糊查询", res);

              for (let i = 0; i < res.result.list.length; i++) {
                let data = {
                  inventoryId: res.result.list[i].pkInvbasdoc, // 存货 id
                  inventoryNo: res.result.list[i].invcode, //存货编码
                  inventoryName: res.result.list[i].invname, //存货名称
                  standardModel: res.result.list[i].invspec, //规格型号
                  unit: res.result.list[i].measname, //单位
                };
                goodsList_invspec.push(data);
              }
            });
          //todo 合并去重函数
          await this.mergeArray(goodsList_invname, goodsList_invspec);
        }
      }
    },
    //todo 合并去重函数
    mergeArray(arr1, arr2) {
      let arrs = [...arr1, ...arr2];

      //根据inventoryId去重
      let map = new Map();
      for (let item of arrs) {
        if (!map.has(item.inventoryId)) {
          map.set(item.inventoryId, item);
        }
      }
      this.goodsList = [...map.values()];
    },
    // 路由跳转函数
    RouterJump(record) {
      console.log(record);
      // 审核人
      if (record.reviewer == this.$store.state.user.info.id) {
        console.log("这是审核人,能审核,能提交");
        this.$router.push({
          path: "MorphologicalTransformationDetail",
          query: {
            Id: record.id,
          },
        });
      }
      // 制单人能修改
      else if (record.preparedBy == this.$store.state.user.info.id) {
        console.log("这是制单人,能修改");
        // 如果未审核，则能修改，审核过了则不能修改
        if (record.auditMark == 2) {
          this.$router.push({
            path: "MorphologicalTransformation",
            query: {
              Id: record.id,
            },
          });
        } else {
          // 审核过了,不能修改
          this.$router.push({
            path: "MorphologicalTransformationDetail",
            query: {
              Id: record.id,
            },
          });
        }
      }
      // 其余人员
      else {
        console.log("这是其余人员,仅能查看，不能审核和提交");
        this.$router.push({
          path: "MorphologicalTransformationDetail",
          query: {
            Id: record.id,
          },
        });
      }
    },

    // ----------- 表格 -----------
    // 分页函数
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      // let queryPath = this.getQueryPath();
      // this.getMorphologicalTransformationList(queryPath);
      this.queryList();
    },

    // 拉取列表
    getMorphologicalTransformationList() {
      this.data = [];
      this.ALLOrderList = [];
      const { current, pageSize } = this.pagination;
      let _query = `?pageNo=${current}&pageSize=${pageSize}`;
      if (this.queryform.document) {
        _query += `&document=${this.queryform.document}`;
      }
      if (this.queryform.beginDate) {
        _query += `&beginDate=${this.queryform.beginDate}`;
      }
      if (this.queryform.endDate) {
        _query += `&endDate=${this.queryform.endDate}`;
      }
      zhuanhuanHttp
        .getWarhouseMorphologicalTransformationList(_query)
        .then((res) => {
          console.log("----- res -----", res);
          let array = res.result.records;
          const pagination = { ...this.pagination };
          pagination.total = res.result.total;
          pagination.pageSize = res.result.size;
          this.pagination = pagination;
          array.forEach((item, index) => {
            item.lineNo =
              (pagination.current - 1) * res.result.size + index + 1;
          });
          for (let i = 0; i < array.length; i++) {
            this.$set(array[i], "key", i + 1);

            if (
              this.ALLOrderList.indexOf(res.result.records[i].document) > -1
            ) {
              array[i].document = "";
              console.log("没有重复");
              this.data.push(array[i]);
            } else {
              console.log("已经重复");
              this.ALLOrderList.push(res.result.records[i].document);
              array[i].document = res.result.records[i].document;
              this.data.push(array[i]);
            }
          }
        });
    },

    //重置
    Reset() {
      this.queryform = {
        inventoryId: "", // 存货名称
        inventoryNo: "",

        document: "",
        inventoryName: "",
        auditMark: "",
        inboundHouse: "",
        prepared: "",
      };
      this.resetPagination();
      this.getMorphologicalTransformationList();
    },

    // ----------- 查询 -----------
    // 模糊查询
    queryList() {
      this.data = [];
      this.ALLOrderList = [];
      // let time = moment(this.queryform.formDate).format("YYYY-MM-DD");
      // if (time === "Invalid date") time = "";
      let queryPath =
        "?pageNo=" +
        this.queryParam.page +
        "&pageSize=" +
        this.queryParam.size +
        `&beginDate=${this.queryform.beginDate}&endDate=${
          this.queryform.endDate
        }&document=${this.queryform.document}&inventoryId=${
          this.queryform.inventoryId
        }&depotId=${this.queryform.inboundHouse}&auditMark=${
          this.queryform.auditMark
        }&preparedBy=${this.queryform.prepared}&isSynchronized=${
          this.queryform.isSynchronized
        }`;
      zhuanhuanHttp
        .getWarhouseMorphologicalTransformationList(queryPath)
        .then((res) => {
          console.log("----- queryRes -----", res);
          let array = res.result.records;
          const pagination = { ...this.pagination };
          pagination.total = res.result.total;
          pagination.pageSize = res.result.size;
          this.pagination = pagination;
          for (let i = 0; i < array.length; i++) {
            array[i].key = i + 1;
            // array[i].lineNo = i + 1;
            if (
              this.ALLOrderList.indexOf(res.result.records[i].document) > -1
            ) {
              array[i].document = "";
              console.log("没有重复");
              this.data.push(array[i]);
            } else {
              console.log("已经重复");
              this.ALLOrderList.push(res.result.records[i].document);
              array[i].document = res.result.records[i].document;
              this.data.push(array[i]);
            }
          }

          array.forEach((item, index) => {
            item.lineNo =
              (pagination.current - 1) * res.result.size + index + 1;
          });
        });
    },

    // ----------- 删除列表数据 -----------
    Delete(id) {
      zhuanhuanHttp.getDeleteWarhouseMor("?id=" + id).then((res) => {
        if (res && res.code === 200) {
          this.$message.success("删除成功");
          this.getMorphologicalTransformationList();
        } else {
          this.$message.error("删除失败");
        }
      });
    },

    // 获取的单据号列表
    getAssemblyListAndId1() {
      zhuanhuanHttp.getAssemblyListAndId1().then((res) => {
        this.OrderList = Object.values(res.result);
        console.log(this.OrderList);
      });
    },

    // 导出列表
    exportToExcel() {
      this.queryPath =
        "?beginDate=" +
        this.queryform.beginDate +
        "&endDate=" +
        this.queryform.endDate +
        "&document=" +
        this.queryform.document +
        "&inventoryId=" +
        this.queryform.inventoryId +
        "&depotId=" +
        this.queryform.inboundHouse +
        "&auditMark=" +
        this.queryform.auditMark +
        "&preparedBy=" +
        this.queryform.prepared +
        "&isSynchronized=" +
        this.queryform.isSynchronized;
      comHttp.exportTransformationOut(this.queryPath).then((response) => {
        //如果后端返回的result是进过Blob处理的，直接 window.URL.createObjectURL(result)，如果没有，就需要先实例化new Blod处理之后再window.URL.createObjectURL(blob)。
        //文件名 文件保存对话框中的默认显示
        let fileName = "形态转换单.xls";
        let data = response.data;
        if (!data) {
          return;
        }
        console.log(response);
        //构造a标签 通过a标签来下载
        let url = window.URL.createObjectURL(new Blob([data]));
        let a = document.createElement("a");
        a.style.display = "none";
        a.href = url;
        //此处的download是a标签的内容，固定写法，不是后台api接口
        a.setAttribute("download", fileName);
        document.body.appendChild(a);
        //点击下载
        a.click();
        // 下载完成移除元素
        document.body.removeChild(a);
        // 释放掉blob对象
        window.URL.revokeObjectURL(url);
      });
    },
  },
};
</script>

<style>
</style>